<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员中心</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- Loading效果容器 -->
    <div class="loader" style="display:none;">加载中...</div>
    <div class="dialog" style="display:none;">成功</div>
    <div class="wrap">
        <div class="top_title">
            <img class="back" src="./back.png" alt="">
            <p class="text_title">会员中心</p>


            <img class="top_bg" src="./top_title.png" alt="">
            <div class="user">
                <div class="user_content">
                    <div class="user_img">
                        <img src="./user_img.png" alt="">
                    </div>
                    <div class="user_text">
                        <p class="user_name">
                            <span class="phone">13512345678</span>
                        </p>
                        <p class="unactived">
                            未开通会员
                        </p>
                    </div>
                </div>
                <img class="user_bg" src="./user_bg.png" alt="">
            </div>

        </div>
        <div class="middle">
            <p class="package">选择VIP会员套餐</p>
            <div class="card">
                <div class="card_div active" data-price="30G" data-productid="74849355">
                    <div class="capacity">30G</div>
                    <div class="price">¥ <span class="font-24"> 6</span></div>
                    <div class="monthlyRent">¥6/月</div>
                </div>
                <div class=" card_div" data-price="200G" data-productid="74849283">
                    <div class="capacity">200G</div>
                    <div class="price">¥<span class="font-24"> 18</span></div>
                    <div class="monthlyRent">¥18/月</div>
                </div>
                <div class="card_div" data-price="2T" data-productid="74849211">
                    <div class="capacity">2T</div>
                    <div class="price">¥<span class="font-24"> 28</span></div>
                    <div class="monthlyRent">¥28/月</div>
                </div>
            </div>

            <div class="tips">
                每月自动扣除，到期自动续费，可随时取消
            </div>

            <div class="btn">
                立即订购
            </div>
            <div class="cancelOrder" style="display:none">
                取消订购
            </div>

            <div class="agreement">
                开通前请阅读 <span class="font-agreement">《会员服务协议》</span>和<span class="font-agreement">《自动续费协议》</span>
            </div>

            <p class="equity">会员尊享权益</p>

            <ul class="detail">
                <li>
                    <img src="./1.png" alt="">
                    <div>
                        <p><span class="detail_capacity">30G</span></p>
                        <p>更多内存更大空间</p>
                    </div>
                </li>
                <li>
                    <img src="./2.png" alt="">
                    <div>
                        <p>离线下载</p>
                        <p>离线也能下载</p>
                    </div>
                </li>
                <li>
                    <img src="./3.png" alt="">
                    <div>
                        <p>手机备份</p>
                        <p>随时随地访问数据</p>
                    </div>
                </li>
                <li>
                    <img src="./4.png" alt="">
                    <div>
                        <p>家庭管理</p>
                        <p>分享家庭美好时光</p>
                    </div>
                </li>
                <li>
                    <img src="./5.png" alt="">
                    <div>
                        <p>极速传输</p>
                        <p>传输速度快</p>
                    </div>
                </li>
                <li>
                    <img src="./6.png" alt="">
                    <div>
                        <p>视频播放</p>
                        <p>存储在线播放视频</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="tips_dialog">
        <div class="dialog_content">
            <p class="dialog_content_title">温馨提示</p>
            <div class="dialog_content_text">
                您正在退订“18元200G会员套餐”业务，退订以后月底失效，次月您将无法再继续领取会员权益喽！
            </div>
            <div class="dialog_btn">
                <div class="dialog_btn_left">残忍退订</div>
                <div class="dialog_btn_right">我再想想</div>
            </div>
        </div>
    </div>
</body>

<script src="./jq.js"></script>
<script>
     // 获取设备类型
     function getDeviceType() {
        var userAgent = navigator.userAgent || navigator.vendor || window.opera;
        // 判断是否为iOS设备  
        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
            return 'iOS';
        }
        // 判断是否为Android设备  
        if (/android/i.test(userAgent)) {
            return 'Android';
        }
        // 如果都不是，则返回其他或未知  
        return 'Other';
    };
     // 获取查询参数的值
     function getQueryParam(name) {
        // 获取查询字符串部分  
        var search = window.location.search.substring(1);
        // 将其分割成键值对数组  
        var params = search.split("&");
        for (var i = 0; i < params.length; i++) {
            var pair = params[i].split("=");
            // 如果找到匹配的键，返回其值  
            if (decodeURIComponent(pair[0]) === name) {
                return decodeURIComponent(pair[1] || "");
            }
        }
        // 如果没有找到，返回 null 或其他默认值  
        return null;
    }
    // let urls = 'http://localhost:3000/api'
    let urls = 'http://192.168.9.63'
    let productId = 74849355
    let orderInfo = {}
    // -2未订购过 -1 已过期 0 已退订 1 未生效 2 已生效
    let orderStatus = -2
    let currentProductId = 0
    let flag = ''

    let mobile = getQueryParam('mobile')
    let sessionId = getQueryParam('sessionId')
    let token = getQueryParam('token')

   

   


    // 先判断套餐状态
    function getOrderStatus() {

        $.ajax({
            url: urls + '/cloudnas/biz/user/plan', // 你的API地址  
            type: 'GET', // 请求类型  
            headers: {
                'Content-Type': 'application/json; charset=UTF-8',
                'NAS-SDK-TOKEN': token,
                'NAS-CLIENT-TYPE': 70,
                'Accept': 'application/json'
            },
            success: function (res) {
                console.log(res, "这里是判断套餐情况")
                if (res.code === 200) {
                    orderInfo = res.data
                    currentProductId = orderInfo.productId
                    orderStatus = orderInfo.productStatus

                    if(orderStatus==1||orderStatus==2){
                        $('.unactived').text("已开通会员")
                    }
                    // -2未订购过 -1 已过期 0 已退订 1 未生效 2 已生效
                    if (orderStatus == -1 || orderStatus == 0) {
                        $('.btn').show()
                        $('.cancelOrder').hide()
                        $('.btn').text('再次订购')
                    } else {
                        if (currentProductId === '74849355') {
                            $('.btn').hide()
                            $('.cancelOrder').show()
                        } else {
                            $('.btn').show()
                            $('.cancelOrder').hide()
                        }
                    }
                }

            },
            error: function (xhr, status, error) {
                // 请求失败时执行的代码  
                console.error("Error: " + error);
                $('.loader').hide();
            }
        });
    }


   



    if (token) {

        $(document).ready(function () {
            // 先获取套餐状态
            getOrderStatus()
            $('.phone').text(mobile)



            // 使用事件委托绑定.card内部的.clickable-div的点击事件  
            $('.card').on('click', '.card_div', function (event) {
                let $element = null
                if ($(event.target).is('.card_div')) {
                    $element = $(event.target)
                } else if ($(event.target.parentNode).is('.card_div')) {
                    $element = $(event.target.parentNode)
                } else if ($(event.target.parentNode.parentNode).is('.card_div')) {
                    $element = $(event.target.parentNode.parentNode)
                }


                $element.siblings().removeClass('active').end().addClass('active');

                // 这里是获取当前是什么价格对应容量
                let price = $element.data('price')
                productId = $element.data('productid')
                $('.detail_capacity').text(price)

                console.log(currentProductId, productId);
                // 当前选择的productid和当前的订购的productionid一致时
                if (String(currentProductId) === String(productId)&& (Number(orderStatus)===1||Number(orderStatus)===2)) {

                    $('.btn').hide()
                    $('.cancelOrder').show()
                } else {

                    $('.btn').show()
                    $('.cancelOrder').hide()
                }

            });



            // 返回按钮
            $('.back').on('click', function (event) {
                console.log('555');
                let app = getDeviceType()
                if (app === 'iOS') {
                    window.webkit.messageHandlers.backHome.postMessage('webview点击了backHome')
                }

                if (app === 'Android') {
                    window.android.callAndroid('webview点击了backHome');
                }


            });



            let productIdList = [74849355, 74849283, 74849211]
            let textList = ['6元30G会员套餐', '18元200G会员套餐', '28元2T会员套餐']
            // 点击立即订购按钮
            // 显示Loading效果
            $('.btn').on('click', function (event) {
                // -2未订购过 -1 已过期 0 已退订 1 未生效 2 已生效
                if (orderStatus == -2 || orderStatus == -1 || orderStatus == 0) {
                    // 这里是再次订购
                    $('.loader').show();
                    // $('.loader').hide();

                    $.ajax({
                        url: urls + '/cloudnas/biz/reverse-order', // 你的API地址  
                        type: 'POST', // 请求类型  
                        headers: {
                            'Content-Type': 'application/json; charset=UTF-8',
                            'NAS-SDK-TOKEN': token,
                            'NAS-CLIENT-TYPE': 70,
                            'Accept': 'application/json'
                        },
                        contentType: 'application/json; charset=UTF-8',
                        data: JSON.stringify({ // 发送到服务器的数据  
                            productId: productId
                        }),
                        success: function (res) {
                            // 请求成功时执行的代码  

                            if (res.code === 200) {
                                window.location.href = 'success2.html?title=再次订购成功'
                            } else {
                                $('.dialog').text(res.msg)
                                $('.dialog').show();

                                setTimeout(() => {
                                    $('.dialog').hide();
                                }, 2000);
                            }
                            $('.loader').hide();
                        },
                        error: function (xhr, status, error) {
                            // 请求失败时执行的代码  
                            console.error("Error: " + error);
                            $('.loader').hide();
                        }
                    });
                } else {
                    // 这里是更换套餐
                    $('.tips_dialog').show()
                    let idx = productIdList.indexOf(Number(currentProductId))
                    let idx2 = productIdList.indexOf(Number(productId))
                    let str = `您已经订购“${textList[idx]}”业务，是否更改为“${textList[idx2]}”业务，更改套餐业务后当即生效`
                    $('.dialog_content_text').text(str)
                    $('.dialog_btn_left').text('取消')
                    $('.dialog_btn_right').text('立即订购')
                    flag = 'change'
                }


            });

            // 点击取消订购

            $('.cancelOrder').on('click', function (event) {
                $('.tips_dialog').show()

                let idx = productIdList.indexOf(Number(currentProductId))
                let str = `您正在退订“${textList[idx]}”业务，退订以后月底失效，次月您将无法再继续领取会员权益喽！`
                $('.dialog_content_text').text(str)
                $('.dialog_btn_left').text('残忍退订')
                $('.dialog_btn_right').text('我再想想')
                flag = 'unsubsribe'
            });


            $('.dialog_btn_right').on('click', function (event) {
                if($('.dialog_btn_right').text()==='我再想想'){
                    $('.tips_dialog').hide()
                    return
                }
               
                if (flag === 'unsubsribe') {
                    // 这里是取消订购
                    $('.loader').show();
                    // $('.loader').hide();

                    $.ajax({
                        url: urls + '/cloudnas/biz/reverse-unsubsribe', // 你的API地址  
                        type: 'POST', // 请求类型
                        headers: {
                            'Content-Type': 'application/json; charset=UTF-8',
                            'NAS-SDK-TOKEN': token,
                            'NAS-CLIENT-TYPE': 70,
                            'Accept': 'application/json'
                        },
                        contentType: 'application/json; charset=UTF-8',
                        data: JSON.stringify({ // 发送到服务器的数据  
                            productId: productId
                        }),
                        success: function (res) {
                            // 请求成功时执行的代码  

                            if (res.code === 200) {
                                window.location.href = 'success2.html?title=退订成功'
                            } else {
                                $('.dialog').text(res.msg)
                                $('.dialog').show();

                                setTimeout(() => {
                                    $('.dialog').hide();
                                }, 2000);
                            }
                            $('.loader').hide();
                        },
                        error: function (xhr, status, error) {
                            // 请求失败时执行的代码  
                            console.error("Error: " + error);
                            $('.loader').hide();
                        }
                    });
                } else {
                    // 这里是变更订购
                    $('.loader').show();
                    // $('.loader').hide();

                    $.ajax({
                        url: urls + '/cloudnas/biz/reverse-change', // 你的API地址  
                        type: 'POST', // 请求类型  
                        headers: {
                            'Content-Type': 'application/json; charset=UTF-8',
                            'NAS-SDK-TOKEN': token,
                            'NAS-CLIENT-TYPE': 70,
                            'Accept': 'application/json'
                        },
                        contentType: 'application/json; charset=UTF-8',
                        data: JSON.stringify({ // 发送到服务器的数据  
                            productId: productId
                        }),
                        success: function (res) {
                            // 请求成功时执行的代码  

                            if (res.code === 200) {
                                window.location.href = 'success2.html?title=变更成功'
                            } else {
                                $('.dialog').text(res.msg)
                                $('.dialog').show();

                                setTimeout(() => {
                                    $('.dialog').hide();
                                }, 2000);
                            }
                            $('.loader').hide();
                        },
                        error: function (xhr, status, error) {
                            // 请求失败时执行的代码  
                            console.error("Error: " + error);
                            $('.loader').hide();
                        }
                    });
                }
            });

            $('.dialog_btn_left').on('click', function (event) {
               
                if($('.dialog_btn_left').text()==='取消'){
                    $('.tips_dialog').hide()
                    return
                }

                if (flag === 'unsubsribe') {
                    // 这里是取消订购
                    $('.loader').show();
                    // $('.loader').hide();

                    $.ajax({
                        url: urls + '/cloudnas/biz/reverse-unsubsribe', // 你的API地址  
                        type: 'POST', // 请求类型
                        headers: {
                            'Content-Type': 'application/json; charset=UTF-8',
                            'NAS-SDK-TOKEN': token,
                            'NAS-CLIENT-TYPE': 70,
                            'Accept': 'application/json'
                        },
                        contentType: 'application/json; charset=UTF-8',
                        data: JSON.stringify({ // 发送到服务器的数据  
                            productId: productId
                        }),
                        success: function (res) {
                            // 请求成功时执行的代码  

                            if (res.code === 200) {
                                window.location.href = 'success2.html?title=退订成功'
                            } else {
                                $('.dialog').text(res.msg)
                                $('.dialog').show();

                                setTimeout(() => {
                                    $('.dialog').hide();
                                }, 2000);
                            }
                            $('.loader').hide();
                        },
                        error: function (xhr, status, error) {
                            // 请求失败时执行的代码  
                            console.error("Error: " + error);
                            $('.loader').hide();
                        }
                    });
                } else {
                    // 这里是变更订购
                    $('.loader').show();
                    // $('.loader').hide();

                    $.ajax({
                        url: urls + '/cloudnas/biz/reverse-change', // 你的API地址  
                        type: 'POST', // 请求类型  
                        headers: {
                            'Content-Type': 'application/json; charset=UTF-8',
                            'NAS-SDK-TOKEN': token,
                            'NAS-CLIENT-TYPE': 70,
                            'Accept': 'application/json'
                        },
                        contentType: 'application/json; charset=UTF-8',
                        data: JSON.stringify({ // 发送到服务器的数据  
                            productId: productId
                        }),
                        success: function (res) {
                            // 请求成功时执行的代码  

                            if (res.code === 200) {
                                window.location.href = 'success2.html?title=变更成功'
                            } else {
                                $('.dialog').text(res.msg)
                                $('.dialog').show();

                                setTimeout(() => {
                                    $('.dialog').hide();
                                }, 2000);
                            }
                            $('.loader').hide();
                        },
                        error: function (xhr, status, error) {
                            // 请求失败时执行的代码  
                            console.error("Error: " + error);
                            $('.loader').hide();
                        }
                    });
                }
            });

        })
    } else {
        // 这里说明是从首次过来的
        $(document).ready(function () {


            $('.phone').text(mobile)



            // 使用事件委托绑定.card内部的.clickable-div的点击事件  
            $('.card').on('click', '.card_div', function (event) {
                let $element = null
                if ($(event.target).is('.card_div')) {
                    $element = $(event.target)
                } else if ($(event.target.parentNode).is('.card_div')) {
                    $element = $(event.target.parentNode)
                } else if ($(event.target.parentNode.parentNode).is('.card_div')) {
                    $element = $(event.target.parentNode.parentNode)
                }


                $element.siblings().removeClass('active').end().addClass('active');

                // 这里是获取当前是什么价格对应容量
                let price = $element.data('price')
                productId = $element.data('productid')
                $('.detail_capacity').text(price)

            });



            // 点击立即订购按钮
            // 显示Loading效果
            $('.btn').on('click', function (event) {

                $('.loader').show();
                // $('.loader').hide();

                $.ajax({
                    url: 'http://192.168.9.63' + '/cloudnas/unicom/reverse-order', // 你的API地址  
                    type: 'POST', // 请求类型  
                    contentType: 'application/json; charset=UTF-8',
                    data: JSON.stringify({ // 发送到服务器的数据  
                        mobile,
                        sessionId,
                        productId
                    }),
                    success: function (res) {
                        // 请求成功时执行的代码  

                        if (res.code === 200) {
                            window.location.href = 'success.html'
                        } else {
                            $('.dialog').text(res.msg)
                            $('.dialog').show();

                            setTimeout(() => {
                                $('.dialog').hide();
                            }, 2000);
                        }
                        $('.loader').hide();
                    },
                    error: function (xhr, status, error) {
                        // 请求失败时执行的代码  
                        console.error("Error: " + error);
                        $('.loader').hide();
                    }
                });

            });



            // 返回按钮
            $('.back').on('click', function (event) {
                console.log('555');
                let app = getDeviceType()
                if (app === 'iOS') {
                    window.webkit.messageHandlers.backHome.postMessage('webview点击了backHome')
                }

                if (app === 'Android') {
                    window.android.callAndroid('webview点击了backHome');
                }


            });





        });
    }



</script>

</html>